<template>
    <div>
        <Head :currentpage="i"></Head>
        <main>
        <section class="main-img">
            <img src="../assets/about_us_banner.jpg" alt="">
        </section>
        <section class="info">
            <div class="float-up">
                <div class="img"></div>
                <div class="text">
                    <h3>北京猿马网络技术有限公司</h3>
                    <p class="subtitle">Beijing YuanMa technology Co., LTD</p>
                    <p>北京猿马网络技术有限公司是一家以互联网平台运营、软件开发、大数据分析、云计算等技术为核心的科技公司。专注于互联网产品方向，
                        拥有资深的开发、管理和运营团队，致力于成为中国领先的互联网企业，解决用户痛点切实为广大用户提供最好的互联网服务。
                    </p>
                    <p>北京猿马网络技术有限公司拥有强大的技术团队，全方面的技术人才，优秀的团队领导者，团结向上的团队氛围。我们在产品的设计、研发、推广等各个环节，
                        都有着丰富的经验，始终致力于互联网产品的开发和维护。我们共享发展，尊重客户、员工和公司的价值诉求，致力于在快乐工作中不断学习和成长，共享发展带来的机会和成就；我们勇于担当，在困难和挑战面前，充分发挥个人和团队的智慧。积极合作、注重成效、不推诿、不逃避、不放弃；我们践行IT理念，真诚服务，创造价值；诚信为本，一诺千金。
                    </p>
                </div>
            </div>
        </section>
        <section class="office">
            <div class="tip environment">
                <p class="title">办公环境</p>
                <p class="subtitle">OFFICE ENVIRONMENT</p>
            </div>
            <div class="images">
                <div class="left">
                    <div class="item item1">
                        <img src="../assets/about_us_gshj1.jpg" alt="">

                        <p>休闲区</p>
                    </div>
                </div>
                <div class="right">
                    <div class="item item2">
                        <img src="../assets/about_us_gshj2.jpg" alt="">
                        <p>休闲区</p>
                    </div>
                    <div class="item item3">
                        <img src="../assets/about_us_gshj3.jpg" alt="">
                        <p>休息区</p>
                    </div>
                    <div class="item item4">
                        <img src="../assets/about_us_gshj4.jpg" alt="">
                        <p>茶水间</p>
                    </div>
                    <div class="item item5">
                        <img src="../assets/about_us_gshj5.jpg" alt="">
                        <p>休息区</p>
                    </div>
                    <div class="item item6">
                        <img src="../assets/about_us_gshj6.jpg" alt="">
                        <p>办公区</p>
                    </div>
                    <div class="item item6">
                        <img src="../assets/about_us_gshj7.jpg" alt="">
                        <p>会议室</p>
                    </div>
                </div>
            </div>
        </section>
        <section class="staff">
            <div class="tip building">
                <p class="title">员工团建</p>
                <p class="subtitle">STAFF BUILDING</p>
            </div>
            <div class="images">
                <div class="item item1"><img src="../assets/about_us_ygtj1.jpg" alt=""></div>
                <div class="item item2"><img src="../assets/about_us_ygtj2.jpg" alt=""></div>
                <div class="item item3"><img src="../assets/about_us_ygtj3.jpg" alt=""></div>
                <div class="item item4"><img src="../assets/about_us_ygtj4.jpg" alt=""></div>
                <div class="item item5"><img src="../assets/about_us_ygtj5.jpg" alt=""></div>
                <div class="item item6"><img src="../assets/about_us_ygtj6.jpg" alt=""></div>
                <div class="item item7"><img src="../assets/about_us_ygtj7.jpg" alt=""></div>
                <div class="item item8"><img src="../assets/about_us_ygtj8.jpg" alt=""></div>
                <div class="item item9"><img src="../assets/about_us_ygtj9.jpg" alt=""></div>
                <div class="item item10"><img src="../assets/about_us_ygtj10.jpg" alt=""></div>
                <div class="item item11"><img src="../assets/about_us_ygtj11.jpg" alt=""></div>
                <div class="item item12"><img src="../assets/about_us_ygtj12.jpg" alt=""></div>
                <div class="item item13"><img src="../assets/about_us_ygtj13.jpg" alt=""></div>
                <div class="item item14"><img src="../assets/about_us_ygtj14.jpg" alt=""></div>
                <div class="item item15"><img src="../assets/about_us_ygtj15.jpg" alt=""></div>
            </div>
        </section>


    </main>
        <Foot></Foot>
    </div>
</template>
<script>
import Head from "@/components/head.vue";
import Foot from "@/components/foot.vue";

export default {
  name: "Home",
  data(){
    return{
      i:3,
    }
  },
  components: {
    Head,
    Foot
  },
};
</script>
<style scoped>
main {
    background: #ccc;
}

section {
    width: 90%;
    min-width: 1200px;
    background-color: #fff;
    margin: auto;
    height: 500px;
}

.main-img {
    width: 100%;
    font-size: 0;
    height: unset;
}


.info {
    position: relative;
    height: 480px;
}

.info .float-up {
    min-width: 1200px;
    position: absolute;
    top: -50px;
    background-color: #fff;
    padding: 50px 0 50px 50px;
}

.info .float-up .img {
    width: 49%;
    height: 400px;
    display: inline-block;
    background: url(../assets/about_us_ymb.jpg) no-repeat center center/100% 100%;
}

.info .float-up .text {
    display: inline-block;
    width: 40%;
    vertical-align: top;
    padding: 0 60px;
    text-align: left;
}

.info .float-up .text h3 {
    font-size: 28px;
    color: #000;
    font-weight: normal;
    line-height: 60px;
}

.info .text .subtitle {
    font-size: 16px;
    color: #b2b2b2;
    line-height: 32px;
}

.info .text p {
    font-size: 14px;
    color: #666;
    line-height: 28px;
}

section .tip .title {
    font-size: 28px;
    line-height: 54px;
    color: #000;
    text-align: center;
}

section .subtitle {
    font-size: 16px;
    line-height: 54px;
    color: #b2b2b2;
    text-align: center;
}

.office {
    height: 700px;
}

.office .images {
    padding: 50px;
    min-width: 1200px;
    height: 800px;
    border: 1px solid #ccc;
    margin: auto;
    text-align: center;
}

.office .images .item {
    display: inline-block;
    height: 250px;
    width: 250px;
    position: relative;
    overflow: hidden;
}

.office .images .item p {
    background-color: rgba(0, 0, 0, .3);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 16px;
    color: #fff;
    height: 50px;
    line-height: 50px;
}

.office .images .item:hover img {
    transform: scale(1.2);
    transition: 1s;
}

.office .images .left {
    height: 490px;
    width: 290px;
    display: inline-block;
}

.office .images .item1 {
    height: 490px;
    width: 290px;
}

.office .images .right {
    height: 490px;
    width: 860px;
    display: inline-block;
    vertical-align: top;
}

.office .images .item2 {
    height: 250px;
    width: 346px;
}

.office .images .item5 {
    height: 236px;
    width: 286px;
}

.office .images .item6 {
    height: 236px;
    width: 280px;
}

.staff {
    height: 800px;
}

.staff .images {
    position: relative;
    width: 90%;
    margin: auto;
}

.staff .images .item {
    position: absolute;
    display: inline-block;
    padding: 20px;
    border: 4px solid #f0f7ff;
}

.staff .images .item1 {
    left: 62px;
    top: 30px;
}

.staff .images .item2 {
    left: 280px;
    top: 15px;
}

.staff .images .item3 {
    left: 420px;
    top: 35px;
}

.staff .images .item4 {
    left: 570px;
    top: 0px;
}

.staff .images .item5 {
    left: 800px;
    top: 30px;
}

.staff .images .item6 {
    left: 960px;
    top: 10px;
}

.staff .images .item7 {
    left: 0px;
    top: 170px;
}

.staff .images .item8 {
    left: 150px;
    top: 185px;
}

.staff .images .item9 {
    left: 360px;
    top: 185px;
}

.staff .images .item10 {
    left: 545px;
    top: 185px;
}

.staff .images .item11 {
    left: 700px;
    top: 185px;
}

.staff .images .item12 {
    left: 955px;
    top: 230px;
}

.staff .images .item13 {
    left: 90px;
    top: 340px;
}

.staff .images .item14 {
    left: 285px;
    top: 360px;
}

.staff .images .item15 {
    left: 505px;
    top: 380px;
}
</style>